<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统锁屏 | 安全验证</title>
    <link th:href="@{favicon.ico}" rel="shortcut icon"/>
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-color: #00f7ff;
            --secondary-color: #7b2dff;
            --dark-bg: #0a0a1a;
            --darker-bg: #050510;
            --text-color: #e0e0ff;
            --text-muted: #a0a0c0;
        }

        body.lockscreen {
            background: var(--dark-bg);
            height: 100vh;
            overflow: hidden;
            font-family: 'Roboto', sans-serif;
            color: var(--text-color);
        }

        .lockscreen-wrapper {
            max-width: 420px;
            margin: 5% auto;
            z-index: 800;
            position: relative;
            background: rgba(10, 10, 30, 0.85);
            backdrop-filter: blur(15px);
            border-radius: 16px;
            padding: 30px;
            box-shadow: 0 0 30px rgba(0, 247, 255, 0.2);
            border: 1px solid rgba(0, 247, 255, 0.1);
            animation: glow 3s infinite alternate;
        }

        @keyframes glow {
            0% {
                box-shadow: 0 0 20px rgba(0, 247, 255, 0.2);
            }
            100% {
                box-shadow: 0 0 30px rgba(123, 45, 255, 0.3);
            }
        }

        .lockscreen-time {
            width: 100%;
            color: var(--primary-color);
            font-size: 3.5rem;
            display: inline-block;
            text-align: center;
            font-family: 'Orbitron', sans-serif;
            font-weight: 500;
            letter-spacing: 2px;
            margin-bottom: 20px;
            text-shadow: 0 0 10px rgba(0, 247, 255, 0.5);
        }

        .lockscreen-date {
            width: 100%;
            color: var(--text-muted);
            font-size: 1rem;
            text-align: center;
            font-family: 'Orbitron', sans-serif;
            margin-bottom: 30px;
            letter-spacing: 1px;
        }

        .lockscreen-name {
            text-align: center;
            font-weight: 500;
            margin: 20px 0;
            font-size: 1.2rem;
            color: var(--primary-color);
            letter-spacing: 1px;
        }

        .lockscreen-id {
            text-align: center;
            font-size: 0.9rem;
            color: var(--text-muted);
            margin-bottom: 30px;
            letter-spacing: 0.5px;
        }

        .lockscreen-item {
            border-radius: 8px;
            padding: 0;
            background: rgba(20, 20, 40, 0.7);
            position: relative;
            margin: 0 auto 30px auto;
            width: 100%;
            border: 1px solid rgba(0, 247, 255, 0.1);
            overflow: hidden;
        }

        .lockscreen-image {
            border-radius: 50%;
            position: absolute;
            left: -10px;
            top: -25px;
            background: var(--dark-bg);
            padding: 5px;
            z-index: 10;
            border: 2px solid var(--primary-color);
            box-shadow: 0 0 15px rgba(0, 247, 255, 0.3);
        }

        .lockscreen-image>img {
            border-radius: 50%;
            width: 70px;
            height: 70px;
            object-fit: cover;
        }

        .lockscreen-credentials {
            margin-left: 70px;
        }

        .lockscreen-credentials .form-control {
            border: 0;
            background: transparent;
            color: var(--text-color);
            height: 50px;
            font-size: 1rem;
            padding-left: 0;
            border-bottom: 1px solid rgba(0, 247, 255, 0.3);
            border-radius: 0;
        }

        .lockscreen-credentials .form-control:focus {
            box-shadow: none;
            border-bottom: 1px solid var(--primary-color);
        }

        .lockscreen-credentials .form-control::placeholder {
            color: var(--text-muted);
        }

        .lockscreen-input-icon {
            position: absolute;
            right: 10px;
            top: 15px;
            color: var(--text-muted);
            z-index: 10;
        }

        .lockscreen-credentials .btn {
            background-color: transparent;
            border: 0;
            padding: 0 15px;
            color: var(--primary-color);
            font-size: 1.2rem;
            transition: all 0.3s;
        }

        .lockscreen-credentials .btn:hover {
            color: var(--secondary-color);
            transform: translateX(3px);
        }

        .help-block {
            color: var(--text-muted);
            margin-top: 30px;
            text-align: center;
            font-size: 0.9rem;
        }

        .text-center a {
            color: var(--primary-color);
            text-decoration: none;
            font-size: 0.9rem;
            transition: all 0.3s;
            position: relative;
        }

        .text-center a:hover {
            color: var(--secondary-color);
        }

        .text-center a:after {
            content: '';
            position: absolute;
            width: 100%;
            height: 1px;
            bottom: -2px;
            left: 0;
            background: var(--primary-color);
            transform: scaleX(0);
            transition: transform 0.3s;
        }

        .text-center a:hover:after {
            transform: scaleX(1);
        }

        .security-level {
            width: 100%;
            height: 4px;
            background: rgba(0, 247, 255, 0.1);
            margin-top: 10px;
            border-radius: 2px;
            overflow: hidden;
            position: relative;
        }

        .security-level:after {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 0;
            background: linear-gradient(90deg, var(--secondary-color), var(--primary-color));
            animation: securityScan 3s infinite alternate;
        }

        @keyframes securityScan {
            0% {
                width: 0;
                left: 0;
            }
            100% {
                width: 100%;
                left: 0;
            }
        }

        .particle-network-animation {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 100vh;
            background-color: var(--darker-bg);
            z-index: -1;
            filter: blur(8px);
            opacity: 0.7;
        }

        .scan-line {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 10px;
            background: linear-gradient(to bottom,
                transparent 0%,
                rgba(0, 247, 255, 0.2) 50%,
                transparent 100%);
            animation: scan 4s linear infinite;
            opacity: 0.3;
            z-index: 1;
        }

        @keyframes scan {
            0% {
                top: -10px;
            }
            100% {
                top: 100%;
            }
        }
    </style>
</head>
<body class="lockscreen">
<div class="particle-network-animation" id="particle-network"></div>
<div class="scan-line"></div>

<div class="lockscreen-wrapper">
    <div class="lockscreen-time"></div>
    <div class="lockscreen-date"></div>
    <div class="lockscreen-name">[[ ${user.loginName} ]]</div>
    <div class="lockscreen-id">ID: [[${#strings.defaultString(user.userName, 'GUEST')}]]</div>

    <div class="lockscreen-item">
        <div class="lockscreen-image">
            <img th:src="(${#strings.isEmpty(user.avatar)}) ? @{/img/profile.jpg} : @{${user.avatar}}" th:onerror="this.src='img/profile.jpg'" class="img-circle" alt="User Image">
        </div>
        <form class="lockscreen-credentials" method="post" action="#" onsubmit="return false;">
            <div class="input-group">
                <input type="password" name="password" autocomplete="off" class="form-control" placeholder="输入安全密码">
                <i class="fa fa-lock lockscreen-input-icon"></i>
                <div class="input-group-btn">
                    <button type="button" class="btn" onclick="unlock()"><i class="fa fa-arrow-right"></i></button>
                </div>
            </div>
            <div class="security-level"></div>
        </form>
    </div>

    <div class="help-block text-center">系统安全锁定，请验证您的身份</div>
    <div class="text-center">
        <a th:href="@{logout}">切换用户登录</a>
    </div>
</div>

<script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script src="../static/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
<script src="../static/js/three.min.js" th:src="@{/js/three.min.js}"></script>
<script src="../static/ajax/libs/layer/layer.min.js" th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script src="../static/ruoyi/js/ry-ui.js" th:src="@{/ruoyi/js/ry-ui.js?v=4.8.0}"></script>
<script src="https://cdn.jsdelivr.net/npm/particles-network@0.1.6/build/particles-network.min.js"></script>
</body>
<script th:inline="javascript">
    var ctx = [[@{/}]];
    Date.prototype.format = function(fmt) {
        var o = {
            "M+" : this.getMonth()+1,                 //月份
            "d+" : this.getDate(),                    //日
            "h+" : this.getHours(),                   //小时
            "m+" : this.getMinutes(),                 //分
            "s+" : this.getSeconds(),                 //秒
            "q+" : Math.floor((this.getMonth()+3)/3), //季度
            "S"  : this.getMilliseconds()             //毫秒
        };

        if (/(y+)/.test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        }

        for (var k in o) {
            if (new RegExp("(" + k + ")").test(fmt)) {
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            }
        }
        return fmt;
    }

    // 初始化粒子网络背景
    function initParticleNetwork() {
        const canvas = document.getElementById('particle-network');
        const options = {
            particleColor: 'rgba(0, 247, 255, 0.5)',
            background: 'transparent',
            interactive: true,
            speed: 'medium',
            density: 'high',
            maxParticles: 100,
            sizeVariations: 3,
            lineColor: 'rgba(123, 45, 255, 0.3)'
        };
        new ParticlesNetwork(canvas, options);
    }

    $(function() {
        // 更新时间
        function updateTime() {
            var now = new Date();
            $('.lockscreen-time').text(now.format('hh:mm:ss'));
            $('.lockscreen-date').text(now.format('yyyy年MM月dd日 dddd'));
        }

        updateTime();
        setInterval(updateTime, 500);

        // 初始化粒子背景
        initParticleNetwork();

        // 输入框特效
        $('input[name="password"]').on('focus', function() {
            $(this).parent().parent().find('.security-level').css('background', 'rgba(0, 247, 255, 0.1)');
        }).on('blur', function() {
            $(this).parent().parent().find('.security-level').css('background', 'rgba(0, 247, 255, 0.1)');
        });
    });

    $(document).keydown(function(event) {
        if (event.keyCode == 13) {
            unlock();
        }
    });

    function unlock() {
        var password = $("input[name='password']").val();
        if ($.common.isEmpty(password)) {
            $.modal.msg("请输入安全密码");
            return;
        }

        // 添加输入特效
        $('input[name="password"]').css('border-bottom-color', 'rgba(0, 247, 255, 0.8)');
        $('.security-level').css('background', 'linear-gradient(90deg, var(--secondary-color), var(--primary-color))');

        var index = "";
        var config = {
            url: ctx + "unlockscreen",
            type: "post",
            dataType: "json",
            data: { password: password },
            beforeSend: function() {
                index = layer.load(2, {
                    shade: [0.1, 'rgba(0, 0, 30, 0.8)'],
                    content: '<div style="color: #00f7ff; font-size: 14px;">身份验证中...</div>'
                });
            },
            success: function(result) {
                if (result.code == web_status.SUCCESS) {
                    // 添加解锁成功动画
                    $('.lockscreen-wrapper').css({
                        'box-shadow': '0 0 50px rgba(0, 247, 255, 0.8)',
                        'transition': 'all 0.5s'
                    });
                    setTimeout(function() {
                        location.href = ctx + 'index';
                    }, 500);
                } else {
                    $.modal.alert({
                        title: '验证失败',
                        content: result.msg,
                        skin: 'layui-layer-molv',
                        shadeClose: true,
                        anim: 5,
                        btn: ['确定'],
                        icon: 5,
                        shade: 0.3,
                        btnAlign: 'c',
                        closeBtn: 0
                    });
                    $("input[name='password']").val("");
                    $('input[name="password"]').css('border-bottom-color', 'rgba(255, 50, 50, 0.8)');
                    $('.security-level').css('background', 'rgba(255, 50, 50, 0.5)');
                }
                layer.close(index);
            }
        };
        $.ajax(config);
    };
</script>
</html>